<template>
  <child-page>
    <div class="components-form-demo-advanced-search">
      <div class="ant-advanced-search-form">
        <a-divider>发帖信息</a-divider>
        <p class="content">
          <span class="label">标题：</span
          ><span class="info">{{ initInfo.title }}</span>
        </p>
        <p class="content">
          <span class="label">发帖人/ID：</span
          ><span class="info"
            >{{ initInfo.set_posts_name }}/{{ initInfo.set_posts_id }}</span
          >
        </p>
        <p class="content" v-if="initInfo.group">
          <span class="label">群组：</span
          ><span class="info"
            ><a-tag color="blue">{{ initInfo.group.name }}</a-tag></span
          >
        </p>
        <p class="content" v-if="initInfo.item">
          <span class="label">项目名称：</span
          ><span class="info"
            ><a-tag color="cyan">{{ initInfo.item.title }}</a-tag></span
          >
        </p>
        <p class="content" v-if="initInfo.movie">
          <span class="label">影视学堂ID：</span
          ><span class="info"
            ><a-tag color="green">{{ initInfo.movie.title }}</a-tag></span
          >
        </p>
        <p class="content">
          <span class="label">内容：</span
          ><span class="info" v-html="initInfo.describe">{{
            initInfo.describe
          }}</span>
        </p>
        <div class="content">
          <span class="label">图片：</span>
          <p class="imgWrapper">
            <a-row :gutter="24">
              <a-col
                :span="isPC ? 8 : 24"
                v-for="(item, index) in initInfo.img"
                :key="index"
                style="margin-bottom: 20px;"
              >
                <img class="imgBox" :src="$api.picPre + item" alt=""
              /></a-col>
            </a-row>
          </p>
        </div>
        <a-divider>审核</a-divider>
        <p class="content">
          <span class="label">审核意见：</span>
          <a-tag
            :color="opinion(initInfo.status) === '已通过' ? 'green' : 'red'"
            >{{ opinion(initInfo.status) }}</a-tag
          >
        </p>
        <p class="content" v-if="initInfo.status === '2'">
          <span class="label">拒绝理由：</span
          ><span class="info">{{ initInfo.error }}</span>
        </p>
      </div>
    </div>
  </child-page>
</template>

<script>
import childPage from "@/components/childPageContent/index";
import validate from "@/tool/validateFunction";
import { Tag } from "ant-design-vue";
import { mapState } from "vuex";
export default {
  name: "add",
  computed: {
    ...mapState(["isPC"])
  },
  components: {
    childPage,
    [Tag.name]: Tag
  },
  data() {
    return {
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      athList: [],
      rule: {
        nickName: [
          { required: true, message: "必填项" },
          { validator: validate.validateLength, max: 15, min: 1 }
        ],
        password: [{ required: true, message: "必填项" }],
        checkPsw: [{ required: true, message: "必填项" }],
        userName: [{ required: true, message: "必填项" }],
        email: [{ validator: validate.validateEmail }],
        phone: [{ validator: validate.validatePhoneNumber }],
        role: [{ required: true, message: "必填项" }]
      },
      initInfo: {},
      showVideo: false,
      showGroup: false,
      showProject: false
    };
  },
  methods: {
    changeType(checkedValues) {
      checkedValues.indexOf("1") === -1
        ? (this.showGroup = false)
        : (this.showGroup = true);
      checkedValues.indexOf("2") === -1
        ? (this.showVideo = false)
        : (this.showVideo = true);
      checkedValues.indexOf("3") === -1
        ? (this.showProject = false)
        : (this.showProject = true);
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((error, values) => {
        if (!error) {
          let form = JSON.parse(JSON.stringify(values));
          delete form.checkPsw;
          this.$ajax
            .post(this.$api.addAdmin, form)
            .then(res => {
              this.$message.success(res.data.message);
              this.$router.push({ name: "adminAuthorityList" });
            })
            .catch(err => {
              this.$message.error(err);
            });
        } else {
          return false;
        }
      });
    },

    handleReset() {
      this.form.resetFields();
    },
    normFile(e) {
      if (Array.isArray(e)) {
        return e;
      }
      return e && e.fileList;
    },
    opinion(status) {
      if (status === "3") {
        return "已通过";
      } else if (status === "2") {
        return "已拒绝";
      }
    },
    getInfo() {
      this.$ajax
        .post(this.$api.postsDetail, { id: this.$route.params.id })
        .then(res => {
          res.img = res.img.split(",");
          this.initInfo = res;
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    }
  },
  created() {
    this.getInfo();
  }
};
</script>

<style scoped lang="less">
.content {
  .flex_content();
  align-items: center;
  line-height: 40px;
  font-size: 15px;
  @media screen and (max-width: 769px) {
    display: block !important;
  }
  .info {
    .flex_one();
    word-wrap: break-word;
    @media screen and (max-width: 769px) {
      display: block !important;
    }
  }
  .label {
    display: inline-block;
    width: 100px;
    text-align: right;
    margin-right: 10px;
    font-weight: bold;
    @media screen and (max-width: 769px) {
      font-size: 10px;
      text-align: left;
    }
  }
}
.imgBox {
  width: auto;
  height: 200px;
  @media screen and (max-width: 769px) {
    width: 100%;
    height: auto;
  }
}
.imgWrapper {
  width: 60%;
  @media screen and (max-width: 769px) {
    width: 100%;
  }
}
</style>
